<template>
	<view class="deliver">
		<view class="head">
			<view class="title">配送方式</view>
			<view class="way">
				<view class="item" :class="i.active?'active':''" v-for="i in deliverData" :key="i.id" @click="addActive(i)">{{i.name}}</view>
			</view>
		</view>
		<view class="list" v-if="show">
			<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange" v-if="showDate">
				<view class="c-row b-b">
					<text class="tit">{{pick}}日期</text>

					<text class="icon-you"><text>{{date}}</text></text>
				</view>
			</picker>

			<picker :range="appointTime" @change="bindTimeChange" v-if="showDate">
				<view class="c-row b-b">
					<text class="tit">{{pick}}时段</text>

					<text class="icon-you"><text>{{time}}</text></text>
				</view>
			</picker>


			<view class="c-row b-b" @click="toStore" v-if="showStore">
				<text class="tit">选择门店</text>

				<text class="icon-you"><text>{{storeName}}</text></text>
			</view>
			<view class="c-row b-b">
				<text class="tit">收货人</text>

				<text class="icon-you"><input type="text" placeholder="请输入" v-model="cReceiver" /></text>
			</view>
			<view class="c-row b-b">
				<text class="tit">联系电话</text>

				<text class="icon-you"><input type="tel" placeholder="请输入" v-model="cReceiveMobile" /></text>
			</view>
		</view>
		<view class="footer">
			<button type="default" @click="setOrderData">确定</button>
		</view>
	</view>
</template>

<script>
	export default {
		name: "",
		components: {

		},

		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				deliverData: [],
				show: false,
				date: currentDate,
				time: '',
				cReceiver:'',
				cReceiveMobile:'',
				storeName:'请选择',
				storeId:'',
				storeAddress:'',
				cDeliverType:'',
				cDeliverName:'',
				detail:{},
				iAppointLimitDays:0,
				appointTime:[],
				enableAppoint:'',
				showDate:false,
				showStore:false,
				pick:'收货',
			}
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		onLoad() {
			
			let datas = {
				"token":this.$SysCache.get('token')||null,
				"iSourceDetail":2
			}
			this.$Request.post(this.$api.httpApi.order.getNewOrder+"&token="+this.$SysCache.get('token'),datas).then(res => {
				if (res.code == 200) {
					this.detail = res.data.data
					this.deliverData = res.data.oDeliverTypeList
					
					this.cReceiver = res.data.cReceiver
					this.cReceiveMobile = res.data.cReceiveMobile
					this.appointTime = res.data.oCustomSetting.appointTime.split(';')||'00:00-23:59'
					this.time = res.data.oCustomSetting.appointTime.split(";")[0]
					this.iAppointLimitDays = res.data.oCustomSetting.iAppointLimitDays
					this.enableAppoint = res.data.oCustomSetting.enableAppoint
					}
				})
		},
		methods: {
			addActive(item) {
				this.show = true
				this.deliverData.forEach(items => {
					if (item.id == items.id) {
						this.$set(items, "active", true)
						this.cDeliverType = items.id
						this.cDeliverName = items.name
					} else {
						this.$set(items, "active", false)
					}
				})
				// console.log(item.id)
				if (item.id == "PICKUP") {
					//门店自提
					this.showStore = true
					if (this.enableAppoint==2||this.enableAppoint==3||this.enableAppoint==6||this.enableAppoint==7){
						this.showDate = true
						this.pick = "提货"
					}else{
						this.showDate = false
						this.showStore = false
					}
				} else if(item.id == "EMS") {
					//快递物流
					this.showStore = false
					this.pick = "送货"
					if (this.enableAppoint==1||this.enableAppoint==3||this.enableAppoint==5||this.enableAppoint==7){
						this.showDate = true
						
					}else{
						this.showDate = false
					}
				} else if(item.id == "STOREDELIVERY") {
					//门店配送
					this.showStore = false
					this.pick = "配送"
					if (this.enableAppoint==4||this.enableAppoint==5||this.enableAppoint==6||this.enableAppoint==7){
						this.showDate = true
						
					}else{
						this.showDate = false
					}
				}else{
					//其他
					this.show = false
				}
				
				if(this.enableAppoint == 0){
					this.showDate = false
				}
			},
			bindDateChange: function(e) {
				this.date = e.target.value
			},
			bindTimeChange: function(e) {
				console.log(e)
				
				this.time = this.appointTime[e.target.value]
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					// year = year - 60;
				} else if (type === 'end') {
					day = day + this.iAppointLimitDays;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			toStore(){
				uni.navigateTo({
					url:`/pages/order/store`
				})
			},
			setStore(item){
				this.storeId = item.id
				this.storeName = item.name
				this.storeAddress = {
					province:item.province,
					city:item.city,
					area:item.area
				}
			},
			setOrderData(){
				let datas = {
					cDeliverType: this.cDeliverType,
					dAppointDate: this.date,
					cAppointTime: this.time,
					cReceiver:this.cReceiver,
					cReceiveMobile:this.cReceiveMobile,
					storeName:this.storeName,
					storeId:this.storeId,
					storeAddress:this.storeAddress,
					cDeliverName:this.cDeliverName
				}
				if(this.cDeliverType == 'PICKUP'){
					if(this.storeId){
						
						this.$api.prePage().setOrderData(datas)
						uni.navigateBack()
					}else{
						uni.showToast({
							title:"请选择提货门店",
							icon:"none"
						})
					}
				}else{
					this.$api.prePage().setOrderData(datas)
					uni.navigateBack()
				}
				
				
			}
		}


	}
</script>

<style scoped lang="less">
	.deliver {

		.head {
			padding: 0 25upx;

			.title {
				font-size: 25upx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: rgba(4, 0, 0, 1);
				margin: 59upx 0 30upx 0;

			}

			.way {
				display: flex;
				justify-content: flex-start;
				align-items: center;

				.item {
					width: 149upx;
					height: 51upx;
					background: rgba(255, 255, 255, 1);
					border: 1upx solid rgba(198, 198, 198, 1);
					border-radius: 5upx;
					font-size: 23upx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: rgba(102, 102, 102, 1);
					margin-right: 17upx;
					display: flex;
					justify-content: center;
					align-items: center;

					&.active {
						background-color: #FA3563;
						color: #fff;
						border-color: #FA3563;
					}
				}
			}
		}

		.list {
			display: flex;
			flex-direction: column;
			margin-top: 42upx;

			.c-row {
				display: flex;
				align-items: center;
				padding: 30upx 25upx;
				position: relative;
				background: #fff;
				margin-bottom: 10upx;

				.tit {
					width: 140upx;
					font-size: 27upx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: rgba(102, 102, 102, 1);

				}

				.icon-you {
					flex: 1;
					text-align: right;
					font-size: 26upx;
					color: #999;
					&::before{
						display: none;
					}
				}

				.righttext {}
				input{
					flex: 1;
					text-align: right;
					font-size: 26upx;
					color: #999;
					display: block;
				}

			}
		}
	}
	.footer{
		position: fixed;
		bottom: 200upx;
		width: 100%;
		button{
			width:669upx;
			height:68upx;
			display: flex;
			justify-content: center;
			align-items: center;
			background:rgba(240,64,111,1);
			border-radius:34upx;
			font-size:23upx;
			font-family:Microsoft YaHei;
			font-weight:400;
			color:rgba(255,255,255,1);
		}
		
	}
</style>
